<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片预加载之无序加载--QQ表情</title>
    <style>
        body, p, ul, li {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #eee;
        }

        a {
            text-decoration: none;
            outline: none;
        }

        li {
            list-style-type: none;
        }

        .box {
            margin: 150px 0 0 200px;
        }

        #face-btn {
            display: block;
            color: #333;
        }

        #face-btn:hover {
            color: #ccc;
        }

        .panel {
            display: none;
            width: 390px;
            padding: 2px;
            border: 1px solid #ccc;
            background-color: #fff;
        }

        .loading {
            text-align: center;
        }

        .list li {
            display: inline-block;
            width: 44px;
            height: 44px;
            border: 1px solid #fff;
            margin-bottom: 5px;
            cursor: pointer;
        }

        .list li:hover {
            border-color: #06c;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="javascript:;" id="face-btn">表情</a>
    <div class="panel">
        <p class="loading">表情加载中,请稍后...</p>
        <!--<ul class="list">-->
        <!--<li><img src="face/QQ/1.gif" alt=""></li>-->
        <!--<li><img src="face/QQ/2.gif" alt=""></li>-->
        <!--<li><img src="face/QQ/3.gif" alt=""></li>-->
        <!--<li><img src="face/QQ/4.gif" alt=""></li>-->
        <!--<li><img src="face/QQ/5.gif" alt=""></li>-->
        <!--<li><img src="face/QQ/6.gif" alt=""></li>-->
        <!--<li><img src="face/QQ/7.gif" alt=""></li>-->
        <!--<li><img src="face/QQ/8.gif" alt=""></li>-->
        <!--<li><img src="face/QQ/9.gif" alt=""></li>-->
        <!--<li><img src="face/QQ/10.gif" alt=""></li>-->
        <!--</ul>-->
    </div>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/preload.js"></script>
<script>
    var $btn = $('#face-btn'),
        $panel = $('.panel');
    var imgs = [];

    for (var i = 0; i < 10; i++) {
        imgs[i] = 'face/QQ/' + (i + 1) + '.gif';
    }

    var len = imgs.length;
    var init = false;

    $btn.on('click', function (event) {
        event.stopPropagation();
        $panel.show();

        if (init == false) {
            $.preload(imgs, {
                all: function () {
                    var html = "";

                    html += '<ul class="list">';

                    for (var i = 0; i < len; i++) {
                        html += '<li><img src="' + imgs[i] + '" alt=""></li>';
                    }
                    html += '</ul>';
                    setTimeout(function () {
                        $panel.html(html);
                    }, 1000);

                }
            });
            init = true;
        }

    });

    $(document).on('click', function () {
        $panel.hide();
    });
</script>
</body>
</html>